tags: iThome 鐵人賽 30天

什麼是Hook?是一個讓你可以不用寫Class Component也可以用Function Component來使用React的各種功能，如state等等，動機主要是為了減少component的複雜與理解度，如果需要更詳細的說明可以查看官方的文件說法

Fuction Component

使用的方法就是一般Fuction的寫法，只不過return的是html格式

Fuction寫法：

function Example() {
    return(
        <div>
            Example
        </div>
    )
}

Arrow Function寫法

const Example = () => {
    return(
        <div>
            Example
        </div>
    )
}

State Hook

接下來來看看state的使用方式與一般component有什麼不同吧。

首先必須先引用import React, { useState } from 'react'或者使用時用React.useState來呼叫。

import React, { useState } from 'react';

與一般this.state很大的不同是宣告方式，會使用const來宣告，陣列內第一個為state的名稱，第二個是當要變更state的值時所要下的function，useState的括號內則是state的初始 (預設) 值。

const [count, setCount] = useState(0);

變更state狀態用法：

// 把count狀態+1
setCount(count + 1)

完整範例：

import React, { useState } from 'react';

function Example() {
  // 宣告一個新的 state 變數，我們叫他「count」
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Effect Hook

Effect Hook可以做到componentDidMount、componentDidUpdate、componentWillUnmount的效果，等於是用一個抵掉三種用法的概念。

componentDidMount、componentDidUpdate

下面的範例可以包括在componentDidMount、componentDidUpdate的情境之中

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // 與 componentDidMount 和 componentDidUpdate 類似：
  useEffect(() => {
    // 使用瀏覽器 API 更新文件標題
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

componentDidMount

但如果單獨要只觸發componentDidMount的功能的話可以這樣子使用

useEffect(() => {
    // componentDidMount
}, []);

後面的中括號是指指定某個state或props更新時才會執行，當是空的時候就代表是只有在component第一次渲染的時候執行。

componentWillUnmount

這個功能可能就比較複雜一點，因為會牽涉到一些使用上的問題，那這邊還是稍微演示一下用法

useEffect(() => {
    // componentDidMount
    
    return () => {
        // componentWillUnmount
    }
}, []);

使用時機例如說新增一個監聽器，在離開時要取消監聽：

useEffect(() => {
    // componentDidMount
    window.addEventListener('keydown', onKeyDown)
    return () => {
        // componentWillUnmount
        window.removeEventListener('keydown', onKeyDown)
    }
}, []);

props

使用function component當然也少不了props，props的變化規則當然也都更state一樣，並且也可以用useEffect來控制喔。

例如props傳進一個count的變數：

import React, { useState, useEffect } from 'react';

function Example(props) {
  return (
    <div>
          {props.count}
    </div>
  );
}

後記

今天差不多就是淺談一下function component，我之後的實作基本上也都會使用function component來執行，因為我覺得比一般component來的簡潔並好控管，那明天就來一點點實作內容吧~

對資安或Mapbox有興趣的話也可以觀看我們團隊的鐵人發文喔~

• 資安新人30
• 打造你的主題地圖！Mapbox 也可以！(ft. React)